<template>
	<div class="page_container">
		<div class="page_container_scroll">
			<a-card :bordered="false" style="margin-bottom: 10px">
				<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
					<a-row :gutter="24">
						<a-col :span="6">
							<a-form-item name="code" label="销售单据号">
								<a-input v-model:value="searchFormState.code" placeholder="请输入销售单据号" />
							</a-form-item>
						</a-col>
						<a-col :span="6">
							<a-form-item name="proInfoId" label="项目">
								<xn-page-selector
									:field-names="{ label: 'name', value: 'id' }"
									:page-function="(param) => pmApi.proinfopage(param)"
									:show-search="true"
									search-field="name"
									ref="proinfoRef"
									v-model:value="searchFormState.proInfoId"
									placeholder="请选择项目"
								>
								</xn-page-selector>
							</a-form-item>
						</a-col>
						<a-col :span="6">
							<a-form-item label="销售员" name="orderPersonId">
								<xn-page-selector
									:field-names="{ label: 'name', value: 'id' }"
									:page-function="(param) => orgApi.orgUserSelector(param)"
									:show-search="true"
									search-field="name"
									ref="userRef"
									v-model:value="searchFormState.orderPersonId"
									placeholder="请选择销售员"
								>
								</xn-page-selector>
							</a-form-item>
						</a-col>
						<a-col :span="6">
							<a-button type="primary" @click="tableRef.refresh(true)">
								<template #icon>
									<SearchOutlined />
								</template>
								查询
							</a-button>
							<a-button class="snowy-buttom-left" @click="reset">
								<template #icon><redo-outlined /></template>
								重置
							</a-button>
						</a-col>
					</a-row>
				</a-form>
			</a-card>
			<a-card :bordered="false">
				<s-table
					ref="tableRef"
					:columns="columns"
					:data="loadData"
					bordered
					:scroll="{ x: 700 }"
					:tool-config="toolConfig"
				>
					<template #operator class="table-operator">
						<div style="display: flex; justify-content: space-between">
							<a-select
								:default-value="globalOrg[0]"
								ref="select"
								:options="globalOrg"
								v-model:value="searchFormState.globalOrg"
								style="width: 120px"
							>
							</a-select>
						</div>
					</template>
					<template #bodyCell="{ index, column, record }">
						<template v-if="column.dataIndex === 'index'">
							<span>{{ index + 1 }}</span>
						</template>

						<template v-if="column.dataIndex === 'action'">
							<a @click="infoRef.onOpen(record)">查看</a>
						</template>
					</template>
				</s-table>
			</a-card>
			<Form ref="formRef" @successful="tableRef.refresh(true)" />
			<Info ref="infoRef" />
		</div>
	</div>
</template>

<script setup name="dbs">
	import saleorderApi from '@/api/sale/order/saleorderApi'
	import Form from './form.vue'
	import Info from './info.vue'
	import bizTool from '@/utils/bizTool'
	import tool from '@/utils/tool'
	import xnPageSelector from '@/components/XnPageSelect/index.vue'
	import pmApi from '@/api/pm/pm/index'
	import orgApi from '@/api/sys/orgApi'
	import { onMounted } from 'vue'

	const globalOrg = tool.dictList('global_org')
	const columns = [
		{
			title: '序号',
			dataIndex: 'index',
			ellipsis: true,
			width: 80,
			align: 'center'
		},
		{
			title: '审核状态',
			dataIndex: 'stateText',
			ellipsis: true,
			align: 'center',
			width: 80
		},
		{
			title: '销售单据号',
			dataIndex: 'code',
			align: 'center',
			width: 140,
			ellipsis: true
		},
		{
			title: '销售方式',
			dataIndex: 'saleMethod',
			align: 'center',
			width: 120
		},
		{
			title: '客户名称',
			dataIndex: 'custName',
			align: 'center',
			width: 150,
			ellipsis: true
		},
		{
			title: '销售员',
			dataIndex: 'salePerName',
			align: 'center',
			width: 120,
			ellipsis: true
		},
		{
			title: '含税金额',
			dataIndex: 'taxAmount',
			align: 'center',
			width: 120,
			ellipsis: true
		},
		{
			title: '不含税金额',
			dataIndex: 'noTaxAmount',
			align: 'center',
			width: 120,
			ellipsis: true
		},
		{
			title: '销售数量',
			dataIndex: 'saleNum',
			align: 'center',
			width: 100,
			ellipsis: true
		},

		{
			title: '操作人',
			dataIndex: 'createUserName',
			align: 'center',
			width: 120,
			ellipsis: true
		},
		{
			title: '操作日期',
			dataIndex: 'createTime',
			align: 'center',
			width: 130
		},
		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: 100,
			fixed: 'right'
		}
	]

	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	// 定义tableDOM
	const tableRef = ref(null)
	const formRef = ref()
	const infoRef = ref()
	const searchFormRef = ref()
	const searchFormState = ref({})
	const proinfoRef = ref()
	const userRef = ref()

	onMounted(() => {
		nextTick(() => {
			proinfoRef.value.onPage({})
			userRef.value.onPage({})
		})
	})
	// 表格查询 返回 Promise 对象
	const loadData = (parameter) => {
		return saleorderApi
			.getPage(
				Object.assign(
					Object.assign(parameter, {
						type: '销售'
					}),
					searchFormState.value
				)
			)
			.then((res) => {
				res.records.forEach((it) => {
					it['createTime'] = bizTool.obtainCreateTime(it)
					it['createUserName'] = bizTool.obtainCreateUser(it)
				})
				return res
			})
			.catch(() => {})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
	// 删除
	const remove = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		saleorderApi
			.delete(params)
			.then(() => {
				tableRef.value.refresh()
			})
			.catch(() => {})
	}
</script>

<style scoped>
	.ant-form-item {
		margin-bottom: 0 !important;
	}

	.primaryAdd {
		margin-right: 10px;
	}

	.snowy-buttom-left {
		margin-left: 8px;
	}
</style>
